<script setup>
import { reactive, ref } from 'vue';
import * as api from '@/api/basic/area';

const options = reactive([])

let search = ref('')

let selected = ref([])

const init = () => {
    api.getAll().then( res => {
        console.log('========',res)
        options.push(...res.data)
    })
}

init()

const emits = defineEmits(['query'])

const captureParentNode = (n,e) => {
    if (!n) return
    return n.find(item => {
      return item.code === e;
    })
}

const query = () => {
  console.log("ids:",selected.value)
    emits('query', {
        search: search.value,
        areaFullIds: selected.value
     })
}

</script>
<template>
    <div class="component-box">
        <div class="left">
            <div class="item">
                <span>部门：</span>
                <el-select v-model="selected"
                     placeholder="请选择行政区划"
                     style="width: 240px"
                     multiple
                     collapse-tags
                     collapse-tags-tooltip
                     :max-collapse-tags="2"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    >
                        <span style="float: left">{{ item.name }}</span>
                        <span v-if="item.parentCode !== '0'"
                              style="float: right;color: var(--el-text-color-secondary);font-size: 12px;">
                            {{ captureParentNode(options,item.parentCode)?.name }}
                            <el-tooltip
                                class="box-item"
                                effect="dark"
                                content="上级地区"
                                placement="right"
                            >
                              <el-icon><QuestionFilled /></el-icon>
                            </el-tooltip>
                        </span>
                    </el-option>
                </el-select>
            </div>
            <div class="item">
                <el-input v-model="search"
                    placeholder="请输入内容"
                    clearable
                >
                    <template #prefix>
                        <el-icon><Search /></el-icon>
                    </template>
                </el-input>
            </div>
        </div>
        <div class="right">
            <el-button type="primary" @click="query">搜索</el-button>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.component-box{
    display: flex;
    margin-bottom: 12px;
    padding: 10px 10px 0;
    box-sizing: border-box;
    border: 1px solid #c5c5c5;
    .left{
        display: flex;
        flex: 1;
        flex-wrap: wrap;
        justify-content: flex-start;
        .item{
            margin-right: 10px;
            margin-bottom: 10px;
        }
    }
    .right{
        display: flex;
        flex: 0.2;
        justify-content: flex-end;
        align-items: flex-end;
        margin-bottom: 10px;
    }
}
</style>
